'use client'
import React, { useState } from 'react';
import { Space, Table, Radio, Tag, Button, Switch ,Modal} from 'antd';
import type { TableProps } from 'antd';
import { EditOutlined, VerticalAlignTopOutlined, DeleteOutlined } from '@ant-design/icons';


interface DataType {
  id: number,
  shangji: string,
  title: string,
  jieduan: string,
  num: string,
  sprice: string,
  time: string,
  day: number,
  name: string;
}

export default function Home() {
  const rowSelection: TableProps<DataType>['rowSelection'] = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

  const list:any = [
    {
      "id": 1,
      "shangji": "商机标题",
      "title": "深圳市亿恩科技有限公司",
      "jieduan": "初步洽谈",
      "num": "10条",
      "sprice": "￥10,000.00",
      "time": 1752689523547,
      "day": 30
    },
    {
      "id": 2,
      "shangji": "商机标题",
      "title": "深圳市亿恩科技有限公司",
      "jieduan": "初步洽谈",
      "num": "10条",
      "sprice": "￥10,000.00",
      "time": 1752689523547,
      "day": 30
    },
    {
      "id": 3,
      "shangji": "商机标题",
      "title": "深圳市亿恩科技有限公司",
      "jieduan": "初步洽谈",
      "num": "10条",
      "sprice": "￥10,000.00",
      "time": 164689523547,
      "day": 30
    },
    {
      "id": 4,
      "shangji": "商机标题",
      "title": "深圳市亿恩科技有限公司",
      "jieduan": "初步洽谈",
      "num": "10条",
      "sprice": "￥10,000.00",
      "time": 1752689523547,
      "day": 30
    },
    {
      "id": 5,
      "shangji": "商机标题",
      "title": "深圳市亿恩科技有限公司",
      "jieduan": "初步洽谈",
      "num": "10条",
      "sprice": "￥10,000.00",
      "time": 1752689523547,
      "day": 30
    }
  ]

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '商机标题',
      dataIndex: 'shangji',
    },
    {
      title: '关联客户',
      dataIndex: 'title',
    },
    {
      title: '商机阶段',
      dataIndex: 'jieduan',
    },
    {
      title: '报价记录',
      dataIndex: 'num',
    },
    {
      title: '报价总金额',
      dataIndex: 'sprice',
    },
    {
      title: '最后跟进',
      dataIndex: 'time',
    },
    {
      title: '未跟进天数',
      dataIndex: 'day',
    },
    {
      title: '操作',
      render: (_, record) => (
        <Space size="middle" style={{color:'blue'}}>
          <span onClick={()=>{
        showModal()
        setTitle('编辑')
      }}><EditOutlined />编辑</span>
          <span><VerticalAlignTopOutlined />置顶</span>
          <span><DeleteOutlined />删除</span>
        </Space>
      ),
    },
  ];
  // 控制标头标识
  const [title,setTitle]=useState('添加')
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <Button type="primary" onClick={()=>{
        showModal()
        setTitle('添加')
      }}>
        添加
      </Button>
      <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        
      </Modal>

      <Radio.Group onChange={(e) => setSelectionType(e.target.value)} value={selectionType}></Radio.Group>
      <Table<DataType> columns={columns} rowSelection={{ type: selectionType, ...rowSelection }} dataSource={list} rowKey='id' />
    </div>
  );
}
